<template>
	<view>
		<CarpoolNavbarSwiper ref="navbarSwiper" :navbarList="navbarList" :curNavbar="curNavbar" :height="'88rpx'" :dateList="dateList"
		 @handleChooseNavbar="handleChooseNavbar" @handleScrolltolower="handleScrolltolower" @handleRefresherrefresh="handleRefresherrefresh">
		</CarpoolNavbarSwiper>

		<CommonScoreEvaluation ref="score" @confirm="handleSubmitScore"></CommonScoreEvaluation>

		<CommonPay ref="commonPay" :price="dateInfo.waitPay" :orderInfo="orderInfo" @payMoney="payMoney" @wechatPaySuccess="wechatPaySuccess"></CommonPay>
		<CommonPay ref="commonPayAdd" :price="dateInfo.waitPay" :orderInfo="orderInfo" @payMoney="payMoneyZui" @wechatPaySuccess="wechatPaySuccess"></CommonPay>

		<CommonBackReasonSubmit ref="submitReason" @confirm="handleSubmitBackReason"></CommonBackReasonSubmit>

		<CommonBackReasonSubmitMoney ref="submitReasonMoney" :price="cancleOrderShouldPayMoney" @confirm="handleSubmitBackReason"></CommonBackReasonSubmitMoney>
	</view>
</template>

<script>
	import CommonPay from '@/components/common/common-pay.vue'
	import CommonBackReasonSubmit from '@/components/common/common-backReason-submit.vue'
	import CommonBackReasonSubmitMoney from '@/components/common/common-backReason-submit-money.vue'
	import CommonScoreEvaluation from '@/components/common/common-scoreEvaluation.vue'
	import CarpoolNavbarSwiper from '@/components/user/carpool-navbarSwiper.vue'
	export default {
		components: {
			CarpoolNavbarSwiper,
			CommonScoreEvaluation,
			CommonBackReasonSubmit,
			CommonBackReasonSubmitMoney,
			CommonPay
		},
		data() {
			return {
				navbarList: [{
						name: '待支付',
						alias: 'toBePaid'
					},
					{
						name: '待确认',
						alias: 'toBoConfirmed'
					},
					{
						name: '未出行',
						alias: 'noTraveling'
					},
					{
						name: '已出行',
						alias: 'traveled'
					},
					{
						name: '已取消',
						alias: 'cancelled'
					},
					{
						name: '追加订单',
						alias: 'addOrder'
					},
				],
				curNavbar: {
					name: '待支付',
					alias: 'toBePaid'
				},
				toBePaidList: [],
				toBoConfirmedList: [],
				noTravelingList: [],
				traveledList: [],
				cancelledList: [],
				addOrderList: [],
				page: {
					pageNum: 0,
					totalPageNum: 0,
					pageSize: 10,
				},
				curEvalInfo: {}, // 当前要评价的订单信息
				dateInfo: {}, // 当前操作订单信息
				cancleOrderShouldPayMoney: 0,
			};
		},
		computed: {
			dateList() {
				return [this.toBePaidList, this.toBoConfirmedList, this.noTravelingList, this.traveledList, this.cancelledList,
					this.addOrderList
				]
			},
			orderInfo() {
				let o = {
					orderNo: this.dateInfo.orderNo,
					type: 2
				}
				return o
			},
			type() {
				let t = 0
				switch (this.curNavbar.alias) {
					case 'toBePaid':
						t = 0;
						break;
					case 'toBoConfirmed':
						t = 1;
						break;
					case 'noTraveling':
						t = 2;
						break;
					case 'traveled':
						t = 3;
						break;
					case 'cancelled':
						t = 4;
						break;
					case 'addOrder':
						t = 5;
						break;
				}
				return t
			}
		},
		onLoad() {
			uni.$on('readyEval', (data) => { // 准备评价
				this.curEvalInfo = data
				this.$refs.score.show()
			})
			uni.$on('cancleOrder', (data) => { // 取消订单
				this.dateInfo = data
				this.getCancelCarpoolOrderShouldPayPay()
			})
			uni.$on('showCommonPay', (data) => {
				this.dateInfo = data
				this.$refs.commonPay.show()
			})
			uni.$on('showCommonPayZhui', (data) => {
				this.dateInfo = data
				this.$refs.commonPayAdd.show()
			})
		},
		onUnload() {
			uni.$off('readyEval')
			uni.$off('cancleOrder')
			uni.$off('showCommonPay')
			uni.$off('showCommonPayZhui')
		},
		onShow() {
			this.getOrderList()
		},
		methods: {
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
				this.getOrderList()
			},
			cancleOrderCommon(reason) { // 取消订单接口合并统一
				const _this = this
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'],
					success(res) {
						_this.submitWxNotifyConfirm('58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc', res[
							'58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'])
				// #endif
						_this.$http.get(_this.$api.cancelCarpoolOrder, {
							orderNo: _this.dateInfo.orderNo,
							reason
						}).then(res => {
							if (res.code === 200) {
								_this.getOrderList()
							}
						})
						// #ifdef MP-WEIXIN
					}
				})
				// #endif
			},
			handleSubmitScore(val) { // 提交评分
				const {
					rate,
					reason
				} = val
				this.$http.post(this.$api.evaluate, {
					type: 2,
					orderNo: this.curEvalInfo.orderNo,
					grade: rate * 20,
					context: reason
				}).then(res => {
					if (res.code === 200) {
						this.getOrderList()
					}
				})
			},
			handleChooseNavbar(item, i) {
				this.curNavbar = item
				this.getOrderList()
			},
			handleScrolltolower(item, i) {
				let totalPage = Math.ceil(this.page.totalPageNum / this.page.pageSize)
				if (this.page.pageNum >= totalPage) return
				this.page.pageNum++
				this.getMoreOrderList()
			},
			handleRefresherrefresh(item, i) {
				this.page.pageNum = 1
				this.getOrderList()
			},
			getOrderList() {
				this.page.pageNum = 1
				this.$http.get(this.$api.getCarpoolOrderList + '?type=' + this.type + '&pageSize=' + this.page.pageSize +
					'&pageNum=' + this.page.pageNum).then(res => {
					if (res.code === 200) {
						this.page.totalPageNum = res.data.total
						this.$refs.navbarSwiper.stopPullDownRefresh()
					
						if (this.curNavbar.alias === 'toBePaid') { // 待支付
							this.toBePaidList = res.data.result
						} else if (this.curNavbar.alias === 'toBoConfirmed') { // 待确认
							this.toBoConfirmedList = res.data.result
						} else if (this.curNavbar.alias === 'noTraveling') { // 未出行
							this.noTravelingList = res.data.result
						} else if (this.curNavbar.alias === 'traveled') { // 已出行
							this.traveledList = res.data.result
						} else if (this.curNavbar.alias === 'cancelled') { // 已取消
							this.cancelledList = res.data.result
						} else if (this.curNavbar.alias === 'addOrder') { // 追加订单
							this.addOrderList = res.data.result
						}
					}
				})
			},
			handleSubmitBackReason(reason) { // 提交取消订单的原因
				this.cancleOrderCommon(reason)
			},
			// cancleOrder(reason) {
			// 	let api = this.$api.cancelCarpoolOrderNoPay + this.dateInfo.orderNo
			// 	if (this.dateInfo.status == 3 || this.dateInfo.status == 2 || this.dateInfo.status == 4) { // 司机已经分配，此时取消订单需要付费
			// 		api = this.$api.cancelCarpoolOrderPay + `?orderNo=${this.dateInfo.orderNo}&reason=${reason}`
			// 	} else if (this.dateInfo.status == 1) { // 待确认，不强制提交取消理由 （待确认）
			// 		api = this.$api.cancelCarpoolOrderPayNoDreiver + `?orderNo=${this.dateInfo.orderNo}&reason=${reason}`
			// 	}
			// 	this.$http.get(api).then(res => {
			// 		if (res.code === 200) {
			// 			this.updataList(this.dateInfo)
			// 			uni.showToast({
			// 				title: '取消成功'
			// 			})
			// 		}
			// 	})
			// },
			getCancelCarpoolOrderShouldPayPay() {
				const _this = this
				if (_this.dateInfo.status == 0) {
					_this.$http.get(_this.$api.cancelCarpoolOrderShouldPayPay + _this.dateInfo.orderNo).then(res => {
						if (res.code === 200) {
							_this.cancleOrderShouldPayMoney = res.data.fee
							_this.$http.get(_this.$api.cancelCarpoolOrder, {
								orderNo: _this.dateInfo.orderNo,
								// reason
							}).then(res => {
								if (res.code === 200) {
									_this.getOrderList()
								}
							})
						}
					})
				} else {
					_this.$http.get(_this.$api.cancelCarpoolOrderShouldPayPay + _this.dateInfo.orderNo).then(res => {
						if (res.code === 200) {
							_this.cancleOrderShouldPayMoney = res.data.fee

							switch (_this.dateInfo.status - 0) {
								case 0:
									// _this.cancleOrderCommon(); // 直接取消订单 不收服务费，
									// break;
								case 2:
									_this.$refs.submitReasonMoney.show() // 提交原因，收取服务费
									break;
								default:
									{
										// _this.$refs.submitReason.show() // 提交原因 不收服务费，
										_this.$refs.submitReasonMoney.show() // 提交原因，收取服务费
									}
							}

						}
					})
				}

				// 	}
				// })

			},
			// 订单余额支付
			payMoney(pwd) {
				this.$http.post(this.$api.payCarpoolOrder, {
					orderNo: this.dateInfo.orderNo,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						// this.updataList(this.dateInfo)
						uni.showToast({
							title: '支付成功'
						})
						this.getOrderList()
					}
				})
			},
			// 订单追加余额支付
			payMoneyZui(pwd) {
				this.$http.post(this.$api.payCarpoolZuiJiaOrder, {
					orderNo: this.dateInfo.orderNo,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPayAdd.closeKeyBoard()
						// this.updataList(this.dateInfo)
						uni.showToast({
							title: '支付成功'
						})
						this.getOrderList()
					}
				})
			},
			getMoreOrderList() {
				this.$http.get(this.$api.getCarpoolOrderList + '?type=' + this.type + '&pageSize=' + this.page.pageSize +
					'&pageNum=' + this.page.pageNum).then(res => {
					if (res.code === 200) {
						this.page.totalPageNum = res.data.total
						if (this.curNavbar.alias === 'toBePaid') { // 待支付
							this.toBePaidList = [...this.toBePaidList, ...res.data.result]
						} else if (this.curNavbar.alias === 'toBoConfirmed') { // 待确认
							this.toBoConfirmedList = [...this.toBoConfirmedList, ...res.data.result]
						} else if (this.curNavbar.alias === 'noTraveling') { // 未出行
							this.noTravelingList = [...this.noTravelingList, ...res.data.result]
						} else if (this.curNavbar.alias === 'traveled') { // 已出行
							this.traveledList = [...this.traveledList, ...res.data.result]
						} else if (this.curNavbar.alias === 'cancelled') { // 已取消
							this.cancelledList = [...this.cancelledList, ...res.data.result]
						} else if (this.curNavbar.alias === 'addOrder') { // 追加订单
							this.addOrderList = [...this.addOrderList, ...res.data.result]
						}
					}
				})
			},
			updataList(data) {
				switch (this.curNavbar.alias) {
					case 'toBePaid':
						this.toBePaidList.forEach((item, i) => {
							if (item.orderNo === data.orderNo) {
								this.toBePaidList.splice(i, 1)
							}
						})
						break
					case 'toBoConfirmed':
						this.toBoConfirmedList.forEach((item, i) => {
							if (item.orderNo === data.orderNo) {
								this.toBoConfirmedList.splice(i, 1)
							}
						})
						break
					case 'noTraveling':
						this.noTravelingList.forEach((item, i) => {
							if (item.orderNo === data.orderNo) {
								this.noTravelingList.splice(i, 1)
							}
						})
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		touch-action: none;
	}

	.swiper-wrap {
		height: calc(100vh - 88rpx);

		.swiper {
			.swiper-item {
				.content {
					height: 100%;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
